<template>
  <div class="watch-pot">
    <!--缩进容器-->
    <div class="watch-inner-pot">
      <!--流量读数上方图片-->
      <img class="watch" :src="propsData.flowmeterData.imgUrl">
      <!--流量读数容器-->
      <div class="flow-meter-number-box">
        <span class="instant-flowmeter" :style="textStyle">{{propsData.flowmeterData.flowNumber}}</span>
        <span class="unit" :style="textStyle">m<sup   style="font-size: 0.03em">3</sup></span>
      </div>
      <!--流量读数下方图片-->
      <img class="spot" src="@/assets/images/display_board/spot_image.png">
      <!--流量计名称-->
      <span class="flow-meter-name">{{propsData.flowmeterData.flowMeterNumber}}</span>
    </div>
  </div>
</template>

<script setup name="FlowMeter">
  let propsData = defineProps({
    flowmeterData:{
      type:Object
    },
    endColor:{
      type:String
    }
  })

  const textStyle =computed(() =>{
    return {backgroundImage:`linear-gradient(to bottom,#FFFFFF 35%,${propsData.endColor} 65%)` }
  })
</script>

<style scoped lang="scss">
  .watch-pot{
    width: 100%;
    height: 100%;
    //border: 1px red solid;
    display: flex;
    justify-content: center;
    align-items: center;
    //缩进容器样式 用于上下左右的缩进
    .watch-inner-pot{
      width: 75%;
      height: 90%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      //background-color: #BBFFAA;
      .watch{
        width: 100%;
        object-fit:contain;//防止图片被挤压变形

      }
      //读数容器样式
      .flow-meter-number-box{
        height: 24px;
        //background-color: pink;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        //设置数字和单位的共同样式
        span{
          background:linear-gradient(to bottom,#FFFFFF 35%,#85D921 65%); //此处渐变尚有疑问
          -webkit-background-clip:text;
          color:transparent;
          font-weight: 600;
          letter-spacing: 1px;


        }
        //设置数字的样式
        .instant-flowmeter{
          margin-right: 3px;
          font-size: 1.5em;

        }

        // 设置单位的样式
        .unit{
          position: relative;
          top:-2px;
        }
      }
      //小点点样式
      .spot{
        height:2%;
        object-fit:contain;//防止图片被挤压变形
      }
      //流量计名称样式
      .flow-meter-name{
        font-size: 22px;
        color: #00E1EF;
        letter-spacing: 2px;
      }
    }
  }
</style>